<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <link rel="icon" href="https://www.21cake.com/favicon.ico">
    <link rel="stylesheet" href="../css/reset.css">
    <meta name="referrer" content="no-referrer" />
    <link rel="stylesheet" href="../header_footer/css/cakeheader.css">
    <link rel="stylesheet" href="../css/style.css">
    <link rel="stylesheet" href="../css/details.css">
    <script src="../js/jquery-1.9.1.min.js"></script>

</head>

<body>
    <div class="zfg-cake-header"></div>

    <div class="zfg-zhanwei"></div>

    <div class="zfg-Tab">
        <div class="focus" id="focus">
            <div class="zfg-left">
                <ul>
                    <!-- <li class="active" style="opacity:1; filter:alpha(opacity=100);">
                        <img src="../images/1.jpg" />
                    </li>
                    <li>
                        <img src="../images/2.jpg" />
                    </li>
                    <li>
                        <img src="../images/3.jpg" />
                    </li>
                    <li>
                        <img src="../images/4.jpg" />
                    </li> -->
                </ul>
            </div>
            <div class="zfg-right">
                <ul>
                    <!-- <li class="active"><img src="../images/1.jpg" /></li>
                    <li><img src="../images/2.jpg" /></li>
                    <li><img src="../images/3.jpg" /></li>
                    <li><img src="../images/4.jpg" /></li> -->
                </ul>
            </div>
        </div>
    </div>

    <div class="zfg-details-cont">
        <div class="zfg-details-cont-L">
            <!-- <h3>Calamondin&Calamansi 橘与桔</h3>
            <div class="zfg-details-span">
                <a href="javascript:;">新品 &gt;</a>
                <a href="javascript:;">当季推荐 &gt;</a>
            </div>
            <ul class="zfg-details-ul">
                <li>
                    <img src="https://static.21cake.com/themes/site/img/goods/icon/pcicon-33.png" alt="奶油">
                    <span>奶油</span>
                </li>
                <li>
                    <img src="https://static.21cake.com/upload/images/20200723/3139207186ea79a4b24648eb4922dbe2.png"
                        alt="卡曼橘">
                    <span>卡曼橘</span>
                </li>
            </ul>
            <div class="zfg-details-text">
                /像切开一只柑橘鲜果/<br>
                /可以细数的，7个风味层次/<br>
                /每一层都包含不同柑橘元素/<br>
            </div>
            <ul class="zfg-details-icon">
                <li class="zfg-details-icon1"><i></i><span>保鲜条件：0－4℃保藏10小时，5℃食用为佳</span></li>
                <li class="zfg-details-icon2" data-sweet="2">
                    <i></i>
                    <span style="margin-left:5px;">好评甜度：</span>
                    <div class="scoreDiv">
                        <div class="scoreStar">
                            <b class="star"><a class="choo"></a></b>
                            <b class="star"></b>
                            <b class="star"></b>
                            <b class="star"></b>
                            <b class="star"></b>
                        </div>
                    </div>

                </li>

            </ul> -->
        </div>
        <div class="zfg-details-cont-R">
            <!-- <div class="tabbox">

                <div class="zfg-content">
                    <div class="active">
                        <p class="zfg-details-price">¥<u>750.00</u>/2270g(5.0磅)</p>
                        <div class="details-img-box">
                            <ol class="details-options">
                                <li class="details-options-size"><i></i>约27.5x27.5cm</li>
                                <li class="details-options-unmber"><i></i>15-20人</li>
                                <li class="details-options-laid"><i></i>含20套餐具（蜡烛需单独订购）</li>
                                <li class="details-options-time"><i></i>最早今天 15:00配送</li>
                                </ul>
                        </div>
                    </div>
                    <div></div>
                    <div></div>
                    <div></div>
                    　　
                </div>
                <ul>
                    <li class="active">454g<i class="activei"></i></li>
                    <li>454g<i></i></li>
                    <li>454g<i></i></li>
                    <li>454g<i></i></li>
                </ul>
            </div>
            <span>商品规格</span>

            <div class="zfg-details-li">立即购买</div>
            <div class="zfg-details-jia">加入购物车
                <div class="zfg-details-jer">
                    <s>成功添加到购物车</s>
                </div>
            </div> -->
        </div>

    </div>
    <div class="zfg-cake-headernav">
        <div class="zfg-headernav">
            <!-- <h2>Calamondin&amp;Calamansi 橘与桔</h2>
            <a class="add-cart" href="javascript:void(0);" hidden="" style="display: inline;"><i></i></a>
            <p class="zfg-headernavp">¥<span>198.00</span>/454g(1.0磅)</p> -->

        </div>
    </div>
    <div class="zfg-details-bigimg">
        <!-- <img src="../images/1.jpg" alt="">
        <img src="../images/1.jpg" alt="">
        <img src="../images/1.jpg" alt="">
        <img src="../images/1.jpg" alt=""> -->
    </div>
    <div class="zfg-cake-foot"></div>
    <!-- <script type="text/javascript">
        $(function () {
            var oFocus = $('#focus'),
                oRight = oFocus.find('.zfg-right'),
                oLeft = oFocus.find('.zfg-left'),
                aRLi = oRight.find('li'),
                aLLi = oLeft.find('li'),
                index = 0,
                timer = null;
            aRLi.mouseover(function () {
                index = $(this).index()
                $(this).addClass('active').siblings().removeClass();
                aLLi.eq(index).addClass('active').siblings().removeClass();
                aLLi.eq(index).stop().animate({
                    'opacity': 1
                }, 300).siblings().stop().animate({
                    'opacity': 0
                }, 300);
                // stopFoucs();
            })

            // function startFocus() {
            //     index++;
            //     index = index > aRLi.size() - 1 ? 0 : index;
            //     aLLi.eq(index).addClass('active').siblings().removeClass();

            // }

        })
    </script>

    <script>
        $("div.scoreStar .star").click(function () { //星星点击事件
            var index = $(this).index();
            var html = '<a class="choo"></a>';
            $("div.scoreStar .star").empty();
            scoreNum = index + 1;
            $("div.scoreStar .star").each(function (i, value) {
                if (i <= index) {
                    $(this).append(html);
                }
            })
        });
    </script>

    <script type="text/javascript">
        $(function () {
            $(".tabbox li").click(function () {
                //获取点击的元素给其添加样式，讲其兄弟元素的样式移除
                $(this).addClass("active").siblings().removeClass("active")
                $(this).children('i').addClass("activei").parent().siblings().children()
                    .removeClass("activei")
                //获取选中元素的下标
                var index = $(this).index();
                $(this).parent().siblings().children().eq(index).addClass("active")
                    .siblings().removeClass("active");
            });

        });
    </script>
    <script>
        $(function () {
            // 引头部
            $('.zfg-cake-header').load('../header_footer/cakeheader.html')
            // 尾部
            $('.zfg-cake-foot').load('../header_footer/Foot/html/foot.html')
        })
    </script>
    <script>
        $('.zfg-details-li').click((e) => {
            window.location.href = "../page/1.html"
        })
        $('.zfg-details-jia').click((e) => {
            $('.zfg-details-jer').css({
                display: "block"
            })
            setTimeout(() => {
                $('.zfg-details-jer').css({
                    display: "none"
                })
            }, 1000)
        })
    </script>
    <script>
        var winHeight = document.documentElement.clientHeight;
        let nav = document.querySelector(".zfg-cake-headernav");
        console.log(nav);
        window.onscroll = scrollHandler;

        function scrollHandler() {
            var toTop = document.documentElement.scrollTop || document.body.scrollTop;
            nav.style.position = "fixed";

            nav.style.zIndex = "1999";
            if (toTop >= winHeight) {
                nav.style.display = "block";
            } else {
                nav.style.display = "none";
            }
        }
    </script> -->
</body>
<script src="../js/ajax.js"></script>
<script src="../js/detail.js"></script>
    <!-- 链接   http://localhost:8899/cake/cake21/page/Details.html -->

</html>